<!--
 * @Author: ckk
 * @Date: 2022-08-11 15:02:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-08-28 13:22:52
 * @Description: 导航组件
-->
<template>
  <div class="tab-list" >
    <div class="tabList0" v-if="datas.setStyle.commodityType !== 1">
      <yj-mob-tabs @change="changeChannel" v-model="checkActive">
        <yj-mob-tab
          v-for="(item, index) in datas.setStyle.optionList"
          :key="index"
          :name="index"
          :info="item.info">
          <template #title>
            <yj-mob-image v-show="item.pictureUrl" width="100" height="24" :src="item.pictureUrl" />{{ item.name }}
          </template>
        </yj-mob-tab>
      </yj-mob-tabs>
    </div>
    <div class="tabList1" v-if="datas.setStyle.commodityType === 1">
      <yj-mob-tabs @change="changeChannel" v-model="checkActive">
        <yj-mob-tab
          :title="item.name"
          v-for="(item, index) in datas.setStyle.optionList"
          :key="index"
          :name="index"
          :info="item.info">
        </yj-mob-tab>
      </yj-mob-tabs>
    </div>
  </div>
</template>
<script>
import { Tab, Tabs, Image as VanImage } from 'yj-mob-ui';
export default {
  name: 'naviGation',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [VanImage.name]: VanImage
  },
  props: {
    datas: Object,
    navActive: Number
  },
  watch: {
    navActive (newValue) {
      this.checkActive = newValue;
    }
  },
  data () {
    return {
      checkActive: 0
    };
  },
  created () {
    console.log(this.datas, '选项卡');
  },
  methods: {
    changeChannel (index) {
      const item1 = this.datas.setStyle.optionList[index];
      this.$emit('changeData', { url: item1.url, color: item1.bgcolor, navActive: index, info: item1.name });
    }
  }
};
</script>

<style scoped lang="scss">
.tab-list {
  flex-shrink: 0;
  .tabList0{
    ::v-deep {
      .van-tabs__nav {
        background: rgba(0,0,0,0);
      }
      .van-tab {
        flex-shrink: 0;
        width:auto;
        padding-right:20px;
        // line-height: 58px;
      }
      .van-tab__text{
        display: flex;
        align-items: center;
      }
      .van-tabs__line {
        width:20px;
        height:6px;
        left:-4px;
        background: url('../../assets/images/active.png') no-repeat;
        background-size: 100% 100%;
      }
      .van-tabs__scroll {
        background: #F6F3F7;
      }
      .van-tab__text--ellipsis {
        font-size: 16px;
        color: rgba(0,0,0,0.5000);
      }
      .van-tab--active {
        .van-tab__text{
          font-size: 18px;
          font-weight: 600;
          color: #131415;
        }
      }
    }
  }
  .tabList1{
    ::v-deep {
      .van-tabs__nav {
        background: rgba(0,0,0,0);
      }
      .van-tab {
        flex-shrink: 0;
        width:auto;
        height: 29px;
        border-radius: 30px 30px 30px 30px;
        border: 2px solid #FFFFFE;
        margin-right: 20px;
        color: #fff;
      }
      .van-tabs__line {
        background-color: transparent;
      }
      .van-tabs__scroll {
        background: #F6F3F7;
      }
      .van-tab__text--ellipsis {
        font-size: 16px;
        color: rgba(0,0,0,0.5000);
      }
      .van-tab--active {
        height: 40px;
        background: linear-gradient(180deg, #FFAB45 0%, #FE8922 100%);
        box-shadow: 0px 3px 0px 0px #EE9D3B;
        border: 4px solid transparent;
        position: relative;
        border-radius: 30px;
        background-clip: padding-box;
        .van-tab__text{
          font-size: 18px;
          font-family: PingFang SC-Medium, PingFang SC, sans-serif;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 21px;
          text-shadow: 0px 2px 2px #EB7E17;
        }
      }
    }
  }
}
.active{
  width:85%;
  margin:0 auto;
  ::v-deep {
    .van-tabs__nav {
      background: #fff;
    }
    .van-tabs__scroll {
      background: #fff;
    }
  }
}
</style>
